<!--
 * @Description: 景点(包括全部商品,商品分类,商品搜索)
 -->
<template>
  <div class="app-main mobile-layout">
    <div class="w-full bg auto grid-grid d-flex layout-min-full-height">

      <div class="app-content pc-model">
        <div class="app-content-main">
          <div class="app-content-list">
            <div class="app-content-header">
              <div class="main-title"><h5 class="i-con-h-a">
                全部景点
                <span class="text-muted fs-13 v-1 ml-1">
                ({{ total }})
              </span></h5></div>
              <nav class="menu menu--macwk——list macwk-soft-list-menu flex">
                <ul class="menu__list">
                  <div v-for="item in pdCateGory" :key="item.pid">
                    <!--高亮<li class="menu__item menu__item&#45;&#45;current">-->
                    <li class="menu__item">
                      <a :class="item.pid == activityStatus ? 'menu__link active' : 'menu__link'">
                        <div @click=productChange(item.pid)>
                          {{ item.activityName }}
                        </div>
                      </a>
                    </li>
                  </div>
                </ul>
              </nav>
            </div>
            <!--搜索-->
            <div class="pb-5" v-if="search">
              共为您找到
              <span class="text-danger mx-1">{{ total }}</span>
              款和
              <span class="mx-2 el-tag el-tag--danger el-tag--small el-tag--light">
                <span class="text-danger fw-500 fs-18">{{ search }}</span>
                  <i class="el-tag__close el-icon-close"></i>
              </span>
              相关的景点
            </div>
            <!--搜索END-->
            <div id="listAppContainer" class="app-content-body listAppContainer over-y-overlay">
              <div class="mw-row">
                <!--单个景点-->
                <div class="mw-col list-animation-leftIn delay-1" v-for="item in newProList" :key="item.pid">
                  <router-link :to="{ path: '/product/details', query: { productID: item.pid } }"
                               class="macwk-app border white cursor-pointer">
                    <div class="macwk-app__header--icon">
                      <div class="macwk-app__header--icon--content"
                           style="--img:url(https://static.facebstore.com/public/uploads/_/originals/todesk.png);"></div>
                      <img class="delay-0" v-if="item.imgUrl"
                           style="border-radius:8px;"
                           data-src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/todesk.png"
                           :src=item.imgUrl[0] lazy="loaded">
                      <img class="delay-0" v-else
                           data-src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/todesk.png"
                           src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/todesk.png" lazy="loaded">
                    </div>
                    <div class="macwk-app__body h-150"><p class="macwk-app__body--version text-truncate">
                      <span
                        style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 1;">&nbsp;</span>
                    </p>
                      <h5 class="macwk-app__body--title"
                          style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 1;">
                        <span class="fs-12 v-3">👍 </span>
                        <span>{{ item.productName }}</span> <span
                        class="macwk-app__body--title--version text-muted fs-14">
                        <span class="mx-1">-</span>4.1.1</span>
                      </h5>
                      <p class="macwk-app__body--info"
                         style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 1;">
                        <span>假期游玩</span>
                      </p>
                    </div>
                    <div class="macwk-app__extend">
                      <div class="macwk-app__extend--download">
                        <i class="el-icon-s-data"></i>
                        <span v-if="item.views < 1000">{{ item.views }}</span>
                        <span v-else>{{ Math.round(item.views / 1000) }}k</span>
                      </div>
                      <div class="macwk-app__extend--comment">
                        <i class="icon-bubble"></i>
                        <span v-if="item.views < 1000">{{ item.views }}</span>
                        <span v-else>{{ Math.round(item.views / 1000) }}k</span>
                      </div>
                      <div class="macwk-app__extend--update justify-content-end">
                        <i class="icon-clock"></i>
                        <span>{{ item.updateTime.slice(0, 10) }}</span>
                      </div>
                    </div>
                  </router-link>
                </div>
                <!--单个景点END-->
              </div>
              <el-pagination
                class="el-pagination-gl"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total=total>
              </el-pagination>
            </div>

          </div>
        </div>
      </div>
      <div class="app-content mobile-model">
        <div class="d-flex layout-min-full-height justify-content-center align-items-center">
          <div class="text-center" style="width: 80%; margin: 0px auto;"><h1 class="mb-4">哇，窗口太小啦</h1>
            <p class="mb-6">请调整浏览器窗口大小或者请使用手机查看！</p></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MyList from "@/components/MyList.vue";
import qs from "qs";

export default {
  components: {MyList},
  data() {
    return {
      newProList: "", // 景点列表
      categoryList: "", //分类列表
      categoryID: [], // 分类id
      product: "", // 景点列表
      productList: "",
      total: 0, // 景点总量
      currentPage: 1, //当前页码
      activeName: "-1", // 分类列表当前选中的id
      good_search: "", // 搜索条件
      pdCateGory: [], //景点分类
      current: 1,
      activityStatus: 0,
      search: "", // 搜索条件
    };
  },
  activated() {
    // 如果路由传递了search，则为搜索，显示对应的分类商品
    if (this.$route.query.search != undefined) {
      this.search = this.$route.query.search;
      console.log("获取", this.search)
    } else {
      this.search = ""
    }
    // this._getPdCateGory_();
    this._getPromo_(0, "newProList");
    this.pdCateGory = [{
      pid: 0,
      activityStatus: 0,
      activityName: "最新"
    }, {
      pid: 1,
      activityStatus: 1,
      activityName: "优选"
    }, {
      pid: 2,
      activityStatus: 2,
      activityName: "热门"
    }]
  },
  watch: {
    // 监听搜索条件，响应相应的商品
    search: function (val) {
      if (val != "") {
        this._getPromo_(this.activityStatus, "newProList");
      } else {
        this.search = "";
      }
    },
    // 监听路由变化，更新路由传递了搜索条件
    $route: function (val) {
      if (val.path == "/product") {
        if (val.query.search != undefined) {
          // this.activeName = "-1";
          // this.currentPage = 1;
          // this.total = 0;
          this.search = val.query.search;
        }
      } else {
        this.search = "";
      }
    },
  },
  mounted() {

  },
  methods: {
    productChange(activityStatus) {
      console.log("景点切换", activityStatus);
      this.current = 1
      this._getPromo_(activityStatus, "newProList");
      this.activityStatus = activityStatus
    },
    handleCurrentChange(val) {
      this.current = val;
      this._getPromo_(this.activityStatus, "newProList");
    },
    _getPdCateGory_() {
      this.$axios
        .post("/cat/productCategory/categoryList", {
          limit: "5",
        })
        .then((res) => {
          this.pdCateGory = res.data.productCategory.list;
        })
        .catch((err) => {
          console.log("error");
          return Promise.reject(err);
        });
    },
    // 获取各类景点数据方法封装
    _getPromo_(activityStatus, val, api) {
      api = api != undefined ? api : "/cat/productInfo/getProductByAi";
      this.$axios
        .post(api, {
          page: this.current,
          limit: 12,
          activityStatus: activityStatus,
          productName: this.search
        })
        .then((res) => {
          this[val] = res.data.productPage.list;
          this.total = res.data.productPage.totalCount;
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
  },
};
</script>

